import {JSX, useState} from "react";
import { TriangleDownArrowSvg } from '@/components/triangle-down-arrow-svg/index.tsx';
import { ToggleAnimate } from '@/components/toggle-animate/index.tsx';
import { invoke } from '@tauri-apps/api/core'

import styles from './tree-item.module.scss';


export type TreeData = {
  name: string,
  pid: number,
  memory: number,
  cpuOccupy: string,
  network: string,
  parentPid: null | number,
  children?: TreeData[],
}

export interface Props {
  depth: number,
  data: TreeData
}

invoke('greet', { name: "一些数据" }).then(data => {
  console.log(data)
}).catch(error => {
  console.log(error);
})


export function TreeItem({ depth, data }: Props): JSX.Element {
  const showToggle = data.children && data.children.length > 0;
  const [expanded, setExpanded] = useState(true);

  return (
    <div className={styles["tree-item-wrap"]}>
      <div className={styles["tree-item-data"]} style={{ paddingLeft: 50 * depth }}>
        <div className={styles["tree-item-data-left"]}>
          {showToggle &&
            <div className={styles["tree-item-data-left-toggle"]}
                 onClick={() => setExpanded(!expanded)}
                 style={{ transform: `rotate(${expanded ? -90 : 0}deg)` }}
            >
              <TriangleDownArrowSvg width={20} height={20}  />
            </div>
          }
          <div className={styles["tree-item-data-left-labels"]}>
            <span>{data.name}</span>
            <span>PID：{data.pid}</span>
          </div>
        </div>

        <div className={styles["tree-item-right"]}>
          <div className={styles['status']}>
            <span>8.5MB</span>
            <span>内存</span>
          </div>

          <div className={styles['status']}>
            <span>0.1%</span>
            <span>cpu</span>
          </div>

          <div className={styles['status']}>
            <span>0.5KB/s</span>
            <span>网络</span>
          </div>
        </div>
      </div>

      {
        data.children && data.children?.length > 0
        &&
        <ToggleAnimate expanded={expanded} className={styles["tree-item-children"]}>
          {
            data.children?.map((item) => {
              return <TreeItem depth={depth + 1} data={item} key={item.pid}/>
            })
          }
        </ToggleAnimate>
      }
    </div>
  );
}